import React, { Component } from 'react'
import mjj from "../../../assets/images/mjj.jpg"
import styles from "./topBar.module.scss"

/*
    这是商铺页面上面的商家信息及优惠组件，小组件
    导入到了pages/FoodStore/index.js中
    覃金波 2020年8月22日17:48:02

*/
export default class TopBar extends Component {
    render() {
        return (
            <div>
                <div className={styles.topBar}>
                    {/* 深灰色背景栏 */}
                    <div className={styles.greyBg}>
                        <div className={styles.bgTop}>
                            <span className={styles.ToHome}></span>
                            <span className={styles.search}></span>
                            <span className={styles.collect}>收藏</span>
                            <span className={styles.share}></span>
                        </div>
                        <div className={styles.bgCenter}></div>
                    </div>
                    {/* 商铺详情信息栏 */}
                    <div className={styles.storeMsg}>
                        {/* 商铺名称，图片第一一栏 */}
                        <div className={styles.msgTop}>
                            <div className={styles.topLeft}>
                                <h2>闻香麻椒鸡 (浙大紫金港点)</h2>
                                <div className={styles.leftMsg}>
                                    <span className={styles.sendName}>啊呆专送</span>
                                    <div className={styles.allMsg}>
                                        <span className={styles.sendTime}>约37分钟</span>
                                        <span className={styles.saleNum}>月售9999+</span>
                                        <span className={styles.pickUp}>可自取</span>
                                    </div>
                                </div>
                                
                            </div>
                            <div className={styles.rightMsg}>
                                <img src={mjj} alt="麻椒鸡"/>
                            </div>

                        </div>
                        {/* 商铺名称，第二栏公告 */}
                        <div className={styles.noticeMsg}>
                            <p className={styles.notice}>
                           公告：欢迎光临！用餐高峰请提前下单，谢谢！有问题...
                            </p>
                        </div>
                        {/* 商铺名称，第三栏 领取红包 */}
                        <div className={styles.redPK}>
                            <span className={styles.packet}>￥2 满45可用</span>
                            <span className={styles.change}>领</span>
                        </div>
                        {/* 商铺名称，第四栏 满减信息 */}
                        <div className={styles.subPrice}>
                            <span className={styles.subMsg}>1元津贴</span>
                            <span className={styles.subMsg}>首次光顾减1</span>
                            <span className={styles.subMsg}>满25减24</span>
                            <span className={styles.subMsg}>满80减40</span>
                        </div>
                    </div>


                </div>
            </div>
        )
    }
}
